<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>面向对象编程实例-轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="container">
			<div id="banner">
				<!--emmet-->
				<!--ul>li*5>img[src=img/$.jpg]-->
				<ul class="imgbox">
					<li><img src="img/1.jpg" alt="" /></li>
					<li><img src="img/2.jpg" alt="" /></li>
					<li><img src="img/3.jpg" alt="" /></li>
					<li><img src="img/4.jpg" alt="" /></li>
					<li><img src="img/5.jpg" alt="" /></li>
				</ul>
				<ul class="point">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="btn">
					<a href="javascript:void(0)">&lt;</a>
					<a href="javascript:void(0)">&gt;</a>
				</div>
			</div>			
		</div>
		<script type="text/javascript" src="js/banner.oop.js"></script>
		<script type="text/javascript">
			var banner = new Banner({
				banner:"#banner",
				imgbox:".imgbox",
				nav:".point",
				btn:".btn",
				active:"active",
				speed:1000,
				autoplay:true
			});
		</script>
	</body>
</html>
